<template>
<div>
  <Row>
        <ButtonGroup style="background:#f0f0f0;width:100%">
          <Button @click="isShow=true">新增</Button>
          <Drawer :closable="false" width="640" v-model="isShow" >
            <ViewModel  :listInfo="listInfo" v-if="isShow" />
          </Drawer>
        </ButtonGroup>
    </Row>
   <List item-layout="vertical" split>
        <ListItem v-for="item in data" :key="item.title">
            <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
            <template slot="action">
                <li>
                    <Icon type="ios-star-outline" /> 123
                </li>
                <li>
                    <Icon type="ios-thumbs-up-outline" /> 234
                </li>
                <li>
                    <Icon type="ios-chatbubbles-outline" /> 345
                </li>
            </template>
            <template slot="extra">
                <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
            </template>
        </ListItem>
    </List>
    <Page :total="40" size="small" show-total style="right:0px;position:fixed"/>
</div>
   
</template>
<script>
import ViewModel from './viewModel'
    export default {
      components:{
        ViewModel
      },
        data () {
            return {
              isShow:false,
              listInfo:{},
                data: [
                    {
                        name: 'This is title 1',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    },
                    {
                        title: 'This is title 2',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    },
                    {
                        title: 'This is title 3',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    }
                ]
            }
        }
    }
</script>

<style >

</style>